import React from 'react';
import styles from './index.module.less';
import { useModel, useNavigate } from 'umi';
import { Button, Dropdown, message } from 'antd';
import { logoutAPI } from '@/api/login';
import { removeToken } from '@/utils/tools';

//头部
const Header: React.FC = () => {
  const { count } = useModel('dashboard');
  const navigate = useNavigate();

  const items = [
    {
      key: '1',
      label: (
        <div
          onClick={async () => {
            const res: any = await logoutAPI();
            console.log('res', res);
            if (res?.success) {
              removeToken();
              navigate('/login');
              message.success(res.data);
            }
          }}
        >
          退出登录
        </div>
      ),
    },
  ];
  return (
    <div className={styles.wrap}>
      <div className={styles.left}>
        <h1>使用umi学习中后台系统</h1>
        <span>kk-learn</span>
      </div>
      <div className={styles.right}>
        <Button type='primary'>{count}</Button>
        <Dropdown menu={{ items }} placement='bottom'>
          <div>个人信息</div>
        </Dropdown>
      </div>
    </div>
  );
};

export default Header;
